<template>
	<view>
		<!-- 优惠券弹窗 -->
		<es-bottom-popup :show="show" @close="onClose" backgroundColor="#ffffff">
			<view class="popup-title">分享名片</view>
			<view class="flex-center">
				<view class="flex-center share-item">
					<view class="wechat"><text class="iconfont icon-weixin0" style="font-size: 70rpx!important;"></text>
					</view>
					<text class="name">微信好友</text>
					<button class="share-btn" open-type="share"></button>
				</view>
				<view class="flex-center share-item" @tap="onCreatePoster">
					<view class="poster"><text class="iconfont icon-picfill"></text></view>
					<text class="name">生成海报</text>
				</view>
			</view>
			<view style="width: 750rpx;" :style="{height:bottomHeight+'px'}"></view>


		</es-bottom-popup>


		<view v-if="posterShow" class="poster-box">
			<view @tap="posterShow = false" style="width: 630rpx;height:80rpx;text-align: right;">
				<text class="iconfont icon-close" style="font-size: 60rpx;color: #ffffff;"></text>
			</view>
			<image :src="posterImg" style="width: 630rpx;height:588rpx;"></image>
			<view @tap="saveImg" class="save-img">
				保存图片到相册</view>
		</view>
	</view>



</template>

<script>
	import poster from '@/libs/poster.js';

	let app = getApp();
	export default {
		name: "esCardShare",
		props: {
			userInfo: Object,
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				posterShow: false,
				posterImg: "",
				bottomHeight: 0
			}
		},
		mounted() {
			this.bottomHeight = app.globalData.bottomHeight;
		},
		methods: {
			saveImg() {
				uni.saveImageToPhotosAlbum({
					filePath: this.posterImg,
					success() {
						uni.showToast({
							icon: "none",
							title: "海报已保存至相册，快去分享吧~"
						});
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '图片保存失败，请查看是否已开启保存图片权限'
						});
					}
				})
				this.posterShow = false;
			},
			onCreatePoster() {
				let _this = this;
				if (_this.posterImg) {
					_this.posterShow = true;
					_this.onClose();
					return;
				}
				uni.showLoading({
					title: "海报生成中..."
				})
				poster.drawPoster('posterId', this.userInfo,
					res => {
						uni.hideLoading();
						_this.onClose();
						if (res) {
							_this.posterImg = res;
							_this.posterShow = true;
						} else {
							uni.showToast({
								icon: "none",
								title: "生成海报失败,请稍后再试"
							})
						}
					}
				)

			},
			onClose() {
				this.$emit("close")
			}
		}
	}
</script>

<style>
	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup-title {
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		font-size: 36rpx;
		color: #353535;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.wechat,
	.poster {
		width: 110rpx;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		border-radius: 110rpx;
	}

	.share-item {
		position: relative;
		width: 325rpx;
		height: 300rpx;
		flex-direction: column;
	}

	.share-item .iconfont {
		font-size: 60rpx !important;
	}

	.wechat {
		background: linear-gradient(320deg, #2FB534 0%, #46C923 100%);
		box-shadow: 0rpx 2rpx 20rpx 1rpx rgba(51, 149, 25, 0.3);
	}

	.poster {
		background: linear-gradient(122deg, #FECC1A 0%, #F75050 100%);
		box-shadow: 0rpx 2rpx 20rpx 1rpx rgba(235, 94, 0, 0.3);
	}

	.name {
		font-size: 28rpx;
		font-weight: 500;
		color: #353535;
		margin-top: 20rpx;
	}

	.icon-close {
		font-size: 30rpx;
	}

	.share-btn {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
	}

	.share-btn::after {
		border: none !important;
	}

	.poster-box {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		width: 750rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.save-img {
		width: 630rpx;
		height: 90rpx;
		background: rgb(66, 97, 140);
		border-radius: 100rpx;
		margin-top: 20rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
